<template>
    <div class="shortvideo-page">
        <div class="navbar-wrap">
            <div class="Navbarold">
                <nav>
                    <div class="navbar-logo"></div>
                    <div class="navbar-title">猫眼电影</div>
                    <div class="navbar-button">
                        <div class="nav-btn">
                            <img src="../assets/images/nav-button.png" alt="">
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <div class="short-videos-list">
            <router-link to="/live">
                <div class="short-video-item">
                    <div class="title">真的是物是人非呀</div>
                    <div class="video-info">
                        <img class="user-avatar" src="../assets/images/u02.png" alt="">
                        <div class="user-name">明星行为大赏</div>
                        <img class="like-icon" src="../assets/images/zan.png" alt="">
                        <div class="like-count">153</div>
                    </div>
                </div>
            </router-link>
        </div>
        <bottom-tabs></bottom-tabs>
    </div>
</template>

<script>
import BottomTabs from '../components/BottomTabs.vue'
    export default {
        components:{
            BottomTabs
        }
    }
</script>

<style lang="less" scoped>
.shortvideo-page{
    width: 100%;
    height: 100%;
    overflow-y: scroll;

        // 头部
    .navbar-wrap {
        width: 100%;

        .Navbarold {
            background-color: #e54847;
            height: 38px;
            padding: 6px;
            position: relative;
            overflow: hidden;


            &>nav {
                width: 100%;
                height: 100%;

                .navbar-logo {
                    width: 26.7%;
                    height: 38px;
                    float: left;
                }

                .navbar-title {
                    width: 44.9%;
                    height: 38px;
                    font-size: 18px;
                    color: #fff;
                    text-align: center;
                    line-height: 38px;
                    float: left;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    position: relative;
                }

                .navbar-button {
                    position: relative;
                    width: 26.7%;
                    height: 38px;
                    float: right;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    .nav-btn {
                        width: 17px;
                        height: 16px;
                        margin-right: 6px;
                        text-align: right;

                        &>img {
                            width: 17px;
                            height: 16px;
                            display: block;
                        }
                    }
                }
            }
        }
    }

    .short-videos-list {
        position: relative;
        padding-bottom: 48px;
        font-size: 0;

        .short-video-item {
            background-image: url(http://p0.meituan.net/moviemachine/8b219554fcf3328f0b8d7cdf37b014a8201478.png);
            position: relative;
            display: inline-block;
            width: 49.5%;
            height: 300px;
            margin: 0 .5% 2px 0;
            background-position: 50%;
            background-size: cover;

            .video-info,
            .title {
                width: 170px;
                height: 21px;
                margin: 0 8px;
                position: absolute;
                color: #fff;
            }

            .title {
                font-size: 15px;
                line-height: 21px;
                bottom: 41px;
                text-shadow: 0 0 3px rgb(0 0 0 / 30%);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .video-info {
                display: flex;
                align-items: center;
                font-size: 13px;
                bottom: 14px;

                .user-avatar {
                    width: 21.5px;
                    height: 21.5px;
                    opacity: .9;
                    border: 0 solid rgba(42, 42, 42, .05);
                    border-radius: 50%;
                }

                .user-name {
                    margin: 0 6px;
                    flex: 1;
                    font-size: 13px;
                    display: inline-block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .like-icon {
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    margin-right: 3px;
                    background-color: transparent;
                }

                .like-count {
                    width: 37px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            } 
        }
    }
}

</style>